<template>
  <div>{{ JSON.stringify(this.lineData) }}</div>
  <div ref="kpiChart" v-width="867" v-height="300"></div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {}
  },
  props: {
    lineData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  mounted() {
    this.onSetKpiChart();
  },
  beforeUnmount() {
    if (this.kpiChart) {
      this.kpiChart.dispose();
      this.kpiChart = null;
    }
  },
  methods: {
    onSetKpiChart() {
      this.kpiChart = echarts.init(this.$refs.kpiChart);
      this.kpiChart.setOption(
        {
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#D7DDE4'
              }
            },
            axisTick: {
              alignWithLabel: true,
              lineStyle: {
                color: '#D7DDE4'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#7F8B9C'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#F5F7F9'
              }
            },
            data: this.lineData.map(item => item.collectTime)
          },
          yAxis: {
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#7F8B9C'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#F5F7F9'
              }
            },
            type: 'value'
          },
          series: [{
            data: this.lineData.map(item => item.collectValue),
            type: 'bar',
            tooltip: true,
            smooth: true,
            symbol: 'none',
            itemStyle: {
              normal: {
                barBorderRadius: [3, 3, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69cdff'
                  },
                  {
                    offset: 0.5,
                    color: '#3eb3f7'
                  },
                  {
                    offset: 1,
                    color: '#1495eb'
                  }
                ])
              }
            }
          }],
          color: ['#1495EB', '#00CC66', '#F9D249', '#ff9900', '#9860DF'],
          grid: {
            left: 16,
            right: 25,
            bottom: 5,
            top: 20,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          }
        }
      );
    },
    onResize() {
      this.kpiChart && this.kpiChart.resize();
    }
  },
  watch: {
    lineData: {
      deep: true,
      handler() {
        console.log(this.lineData)
        this.onSetKpiChart();
      }
    }
  }
}
</script>
